<template>
  <!-- 投顾协议  提示 -->
  <div class="tips-box" v-if="consulAgree"> 
    <div class="contect-box">
      <div class="close" @click='close'><i class="iconfont icon-cc-close"></i></div>
      <p class="title">中银证券在线直播服务产品协议</p>
      <div class="contect-text" @scroll="scrollEvent">
        <p class="text-first-line">鉴于，甲方同意有偿使用中银证券股份有限公司(以下简称乙方)提供的“在线直播”投资咨询产品服务(以下简称“该产品或本产品”)，为明确双方的权利和义务，甲方已充分阅读了解并同意以下各项条款：</p>
        <p>1、产品服务</p>
        <p class="text-paragraph">1.1、本产品以投资顾问单向输出视频或音频的方式实现直播服务。</p>
        <p class="text-paragraph">乙方可根据业务发展情況，对该服务内容及标准进行调整，并在乙方自有服务平台(包括客户端等)公示。</p>
        <p class="text-paragraph">1.2、本产品提供的在线直播服务相关内容仅供甲方参考，由甲方结合自身情況、市场情况自主決策、投资风险由甲方自行承担。</p>
        <p class="text-paragraph">1.3、本产品提供的投资建议，应具有合理的依据，投资建议的依据包括证券研究报告或基于证券研究报告、理论模型以及分析方法形成的投资分析意见等。</p>
        <p class="text-paragraph">1.4、本产品依据合法的证券研究报告作出的投资建议，应向甲方说明证券研究报告的发布人和发布日期。</p>
        <p class="text-paragraph">1.5、甲方应保持通讯方式的准确畅通，如因投资者接收信息工具，如因通讯、网络、投资者自身或不可抗力因素导致甲方未接收到乙方服务信息的，乙方不承担任何责任。</p>
        <p>2、产品收费</p>
        <p class="text-paragraph">2.1、本产品按单个视频或音频收取增值服务费，具体单价及相关标准以乙方服务平台(包括客户端等)上公示为准。</p>
        <p class="text-paragraph">2.2、甲方若对乙方提供的服务产品产生异议，可向乙方或所在机构提出。</p>
        <p class="text-paragraph">2.3、凡因执行本协议所发生的或与本协议有关的一切争议，甲乙双方应本着善意通过友好协商解决。协商不成的，可向中国证券业协会证券纠纷调解中心申请调解。若协商或调解不成的，可提交乙方所在地有管辖权的法院进行诉讼，对双方均有约束力。诉讼费用（包含但不限于律师费、诉讼被、保全费、保全保险费等）由败诉方负担。</p>
        <p>3、收费方式</p>
        <p class="text-paragraph">乙方通过现金收费、第三方支付平台(微信、支付宝)等方式收取甲方的增值服务费，甲方可根据实际需要自行选择乙方自有服务平台(包括客户端等)提供的收费方式进行支付。</p>
        <p>4、协议终止</p>
        <p class="text-paragraph">在协议期间，根据市场情况或监管要求等情況，乙方有权决定对该服务产品进行下线的处理，乙方将提前在乙方自有服务平台(包括客户端等)上公布，公布后本协议终止若因甲方个人原因卸载乙方自有服务平台(包括客户端等)或甲方手机号码未及时更新等原因，导致甲方无法接收乙方终止本协议的公告或通知，乙方不承担任何责任。</p>               
        <p>5、其他条款</p>
        <p class="text-paragraph">5.1、甲方不得将本产品提供、授权给任何第三方以任何方式使用。</p>
        <p class="text-paragraph">5.2、本协议作为甲方与乙方已签署的《中银国际证券股份有限公司服务产品协议》的补充协议，同原有协议具有同等的法律效力，本协议未约定的内容，以《中银国际证券股份有限公司服务产品协议》的约定为准。</p>
        <p class="text-paragraph">5.3、本协议双方以电子协议的形式进行签署。当甲方按照乙方自有服务平台(包括客户端等)相应提示，对本协议的内容点击“我已阅读并同意签约”后，则视为甲方已充分阅读理解本协议，同意并签署本协议，本协议开始生效。</p>

      </div>
      <p class="care">请仔细阅读协议并滑至底部</p>
      <div :class="[footer_btn, btn_cur]" @click="agreeCommit(btn_cur)">
        <div class="time" v-html="time"></div>s
        <p class="btn-agree">我同意并签署协议</p>
      </div>
    </div>
  </div>
</template>
<script>
  import fun from '../../util/function'

  export default {
    components: {
    },
    data() {
      return {
        time: 24,
        footer_btn: 'footer-btn',
        scrollBottom: false,// 滚到底
      }
    },
    mounted () {
      this.timeDown();
    },
    destroyed () {
      this.$store.dispatch("consulAgree", false);
    },
    computed: {
      consulAgree() {
        return this.$store.state.tipsShow.consulAgree
      },
      btn_cur() {//button高亮
        if (this.scrollBottom && this.time == 0) {
          return "btn-cur"
        }
      }
    },
    methods: {
      close() {
        if (this.$store.state.tipsShow.consulAgree) {
          this.$router.go(-1)
        }
      },
      timeDown() {
        let intevalFunc = setInterval(() => {
          this.time--
          if (this.time == 0) {
            clearInterval(intevalFunc)
          }
          
        }, 1000);
      },
      scrollEvent () {//监听 协议内容滚动到底部
        const _this = this
        document.querySelector('.contect-text').addEventListener('scroll', function () {
          if (parseInt(this.scrollHeight - this.scrollTop - 2) < this.clientHeight ) {
            _this.scrollBottom = true//到底了
          }else {
            _this.scrollBottom = false
          }
        })
      },
      // 点击 签署投顾协议
      agreeCommit(v) {
        if (v) {
          this.$http.get('/zb/live/zy/signAgreement').then(
            res => {
              res.data.code = '000000'
              res.data.data = true
              if (res.data.code == '000000') {//签署投顾协议
                if (res.data.data) {
                  this.$store.dispatch("consulAgree", false);
                  fun.checkMobileTip()
                }
              }else {
                this.$store.dispatch("consulAgree", false);
                console.log(res.data.msg)
              }
            },
            err => {
              console.log(err)
            }
          )
        } else {
          fun.toastMessage('请仔细阅读协议')
        }
      },
      
    },
  };
</script>
<style scoped>
.tips-box {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1004;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contect-box {
  width: 620px;
  background: white;
  border-radius: 20px;
  position: relative;
  /* z-index: 1001; */
}


.close {
   position: absolute;
   top: 32px;
   right: 30px;
 }

.iconfont.icon-cc-close {
  display: block;
  width: 20px;
  height: 20px;
  color: #959595;
}

.title {
  font-size: 30px;
  font-weight: 500;
  color:rgba(52,52,52,1);
  text-align: center;
  margin: 48px 0 44px 0;
}

.contect-text {
  width:555px;
  height: 633px;
  overflow-y: scroll;
  font-size:20px;
  font-weight:400;
  color:#343434;
  line-height:40px;
  margin: 0 auto;
}

.text-first-line{
	text-indent: 45px;
  margin-bottom: 20px;
}

.text-paragraph {
  text-indent: 10px;
}

.care {
  font-size:20px;
  font-weight:400;
  color:rgba(235,60,60,1);
  line-height:30px;
  margin-top: 40px;
  margin-bottom: 10px;
  text-align: center;
}

.footer-btn {
  display: flex;
  width:421px;
  height:79px;
  /* background:linear-gradient(82deg,rgba(235,60,60,1) 0%,rgba(196,30,30,1) 100%); */
  background: #D8D8D8;
  /* box-shadow:8px 10px 21px 0px rgba(255, 158, 158, 0.35); */
  border-radius: 40px;
  font-size:34px;
  font-weight:500;
  color:#fff;
  margin: 0 auto;
  margin-bottom: 53px;
  align-items: center;
  justify-content: center;
}

.time, .btn-agree {
  font-size:34px;
  font-weight:500;
  color:#fff;
}

.btn-agree {
  margin-left: 6px;
}

.footer-btn.btn-cur {
  background:linear-gradient(82deg,rgba(235,60,60,1) 0%,rgba(196,30,30,1) 100%);
  box-shadow:8px 10px 21px 0px rgba(255, 158, 158, 0.35);
}
</style>